<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>app版本管理</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/formSelects/formSelects-v4.css"/>
</head>
<style>
    .modelBeforeApplyUserForm label {
        width: 100px;
    }
    .layui-table-cell {
        height: auto;
        /*line-height: 28px;*/
    }
</style>
<body>
<% include("../layout/loading.html"){} %>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">

                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label w-auto">版本号:</label>
                        <div class="layui-input-inline mr0">
                            <input id="versionNo" class="layui-input" type="text" placeholder="请输入"/>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline">
                            <select name="status" id="status">
                                <option value="">请选择</option>
                                <option value="0">禁用</option>
                                <option value="1">启用</option>
                            </select>
                        </div>
                </div>

                <div class="layui-inline">
                    <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>查询</button>
                    <button id="btnReset" class="layui-btn icon-btn"><i class="layui-icon">&#xe669;</i>重置</button>
                </div>

                <div class="layui-form-item audit" style="margin-top: 10px">
                    <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>新增</button>
                </div>

                <div class="layui-form-item">
                    <table class="layui-table" id="appVersion" lay-filter="appVersion" style="margin-top: 30px"></table>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    {{# if(d.status==0){ }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="updateStatus">启用</a>
    {{# } }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del3">删除</a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="appVersionVo">
    <form id="appVersionVoForm" lay-filter="appVersionVoForm" class="layui-form model-form appVersionVoForm"
          style="margin-left: 70px;height: 500px">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>APP类型</label>
            <div class="layui-inline" style="width: 300px" >
                <select name="appType" id="appType" lay-verify="required" lay-filter="selFilter">
                    <option value="">请选择</option>
                    <option value="1">安卓</option>
                    <option value="2">IOS</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>版本号:</label>
            <input name="versionNo" placeholder="请输入" type="text" class="layui-input" lay-verType="tips"
                   autocomplete="off" lay-verify="required" style="width: 300px"/>
        </div>
        <div class="layui-form-item appClass" style="display: none">
            <label class="layui-form-label">app安装包:</label>
            <button type="button" class="layui-btn layui-icon layui-icon-upload" id="productImg">上传</button>
        </div>
        <div class="layui-form-item appClass" style="display: none">
            <label class="layui-form-label"></label>
            <input id="appUrl" name="appUrl" placeholder="请上传" type="text" class="layui-input" lay-verType="tips"
                   autocomplete="off"  style="width: 300px" readonly/>
            <input id="url" name="url"  hidden/>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>更新介绍:</label>
            <textarea name="about" placeholder="请输入" type="text" class="layui-textarea" lay-verType="tips"
                   autocomplete="off" lay-verify="required" style="width: 300px" cols="500"></textarea>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>是否强制更新</label>
            <div class="layui-inline" style="width: 300px">
                <select name="forced" lay-verify="required">
                    <option value="">请选择</option>
                    <option value="0">否</option>
                    <option value="1">是</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="appVersionVoSubmit" lay-submit>保存</button>
        </div>

    </form>
</script>

<!-- js部分 -->
<script type="text/javascript" src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/common.js"></script>

<script>
    layui.use(['layer', 'form', 'table', 'admin', 'laydate', 'upload', 'jquery', 'formSelects' ,'excel'],function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var formSelects = layui.formSelects;

        form.on('select(selFilter)', function (data) {
            var appType=$("#appType").val();
            if(1==appType){
                $(".appClass").show();
            }else{
                $(".appClass").hide();
            }
        });

        var insTb = table.render({
            elem: '#appVersion',
            url: 'appVersion/list',
            page: true,
            cellMinWidth: 100,
            text: {none: '暂无数据'},
                cols: [[
                {field: 'id', title: 'id' , hide: true},
                {field: 'versionNo', title: '版本号',width:100},
                {
                    field: 'appType', title: 'app类型', width: 100, templet: function (d) {
                        var typeStr="";
                        if(d.appType==1){
                            typeStr="安卓";
                        }else if(d.appType==2){
                            typeStr="IOS";
                        }
                        return typeStr;
                    }
                },
                {field: 'url', title: '文件地址',width:200},
                {field: 'about', title: '更新介绍'},
                {
                    field: 'status', title: '状态', width: 60, templet: function (d) {
                        var typeStr="";
                        if(d.status==0){
                            typeStr="禁用";
                        }else if(d.status==1){
                            typeStr="启用";
                        }
                        return typeStr;
                    }
                },
                {
                    field: 'forced', title: '强制更新', width: 100, templet: function (d) {
                        var typeStr=" - ";
                        if(d.forced==0){
                            typeStr="否";
                        }else if(d.forced==1){
                            typeStr="是";
                        }
                        return typeStr;
                    }
                },
                {
                    field: 'createTime', title: '创建时间', width: 180, templet: function (d) {
                        return d.createTime;
                    }
                },
                {align: 'center', toolbar: '#tableBar', title: '操作', width: 120}
            ]]
        });

        //搜索
        $('#btnSearch').click(function () {
            var versionNo = $('#versionNo').val();
            var status = $('#status').val();
            insTb.reload({
                where: {
                    versionNo: versionNo,
                    status: status
                }
            });
        });

        // 重置
        $('#btnReset').click(function () {
            $("#versionNo").val("");
            $("#status").val("");
            window.location.reload();
        });

        // 添加
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // 工具条点击事件
        table.on('tool(appVersion)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            switch (obj.event) {
                // 删除
                case 'del3':
                    doDel3(data.id);
                    break;
                case 'updateStatus':
                    updateStatus(data.id);
                    break;
            }
        });

        // 显示表单弹窗
        function showEditModel(appVersionVo) {
            admin.open({
                type: 1,
                title: (appVersionVo ? '修改' : '新建') + 'app安装包',
                area: '650px',
                content: $('#appVersionVo').html(),
                success: function (layero, dIndex) {

                    form.render();

                    //上传文件
                    upload.render({
                        elem: '#productImg',
                        url: '/upload/uploadFile',
                        accept: 'file',
                        exts: 'apk',
                        before: function () {//上传时添加loading样式
                            layer.load(2);
                        },
                        done: function (res) {
                            layer.closeAll('loading');
                            if (res.msg == null) {
                                return layer.msg('上传失败', {icon: 2});
                            }
                            $('#appUrl').val(res.msg);
                            $('#url').val(res.msg);
                        }
                    });
                    form.on('submit(appVersionVoSubmit)', function (data) {
                        layer.close(dIndex);

                        ajaxCommon('/appVersion/add', data.field);

                        insTb.reload();
                        return false;
                    });
                }
            });
        }

        function doDel3(id) {
            top.layer.confirm('确定要删除吗?', {icon: 7}, function (i) {
                top.layer.close(i);
                ajaxCommon('/appVersion/del', {id: id});
                insTb.reload();
            });
        }

        function updateStatus(id) {
            top.layer.confirm('确定要启用吗?', {icon: 7}, function (i) {
                top.layer.close(i);
                ajaxCommon('/appVersion/update', {id: id});
                insTb.reload();
            });
        }
    })
</script>

</body>
</html>